<template>
  <div class="page">
    <!-- 面包屑导航 -->
    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/news/newsList' }">茶圈热点</el-breadcrumb-item>
      <el-breadcrumb-item>资讯详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="article">
      <h1 class="title">{{article.title}}</h1>
      <h4 class="sub">{{article.articleSource}}<span style="padding-left: 10px;">{{article.publishTime}}</span></h4>
      <div class="content" v-html="article.articleContent"></div>
    </div>
    <!-- 推荐商品 -->
    <div class="list-wrapper">
      <ul class="goods-list row">
        <li class="goods-item col-3" v-for="(item, index) in goodsList" :key="index">
          <router-link class="product-box" target="_blank" :to="'/goods/goodsDetail?productId=' + item.productId">
            <img :src="item.productCover" class="product-img" width="100%">
            <div class="product-info">
              <div class="sell">
                <span class="discount">{{item.product.discount ? item.product.discount : '?'}}折</span>
                <span class="sell-price">
                  <em>¥</em>
                  <span v-if="item.product.sellPrice">{{item.product.sellPrice | priceFormat1}}</span>
                  <span v-else>?</span>
                  <i class="sell-type">/{{item.product.attributeName}}</i>
                </span>
                <span class="orignal-price">¥ {{item.product.originalPrice | priceFormat1}}</span>
              </div>
              <div class="name">{{item.name}}</div>
              <div class="clearfix">
                <router-link :to="'/store/storeInfo?storeId=' + item.storeId" class="store clearfix">{{item.customerName}}</router-link>
              </div>
              <div class="pro-grade-name" v-if="item.proGradeName">{{item.proGradeName}}</div>
              <div class="discounts clearfix" v-if="item.product.activityList">
                <div class="tag-group" v-if="item.product.activityList.isMore === '1'">
                  <span class="tag" v-for="(tag, index1) in item.product.activityList.type" :key="index1">{{FavourableActivityTypes.Types[tag]}}</span>
                </div>
                <div class="tag-group" v-else>
                  <span class="tag">{{item.product.activityList.activityName}}</span>
                </div>
              </div>
            </div>
            <div class="keywords">
              <span v-if="item.k1" class="w1">{{item.k1}}</span>
              <span v-if="item.k2" class="w2"><i class="text">{{item.k2}}</i></span>
              <span v-if="item.k3" class="w3">{{item.k3}}</span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: this.$route.query.id || '',
      article: {},
      goodsList: []
    }
  },
  mounted () {
    this.getData()
    this.getGoodsList()
  },
  methods: {
    getData () {
      this.$http.post(this.$api + '/pc/home/queryArticleById', {
        id: this.id
      }).then(res => {
        if (res.responseCode === '0000') {
          this.article = res.data
        } else {
          this.$message.error({
            message: res.responseMsg,
            duration: this.$store.state.duration
          })
        }
      }).catch(err => {
        console.error(err)
      })
    },
    // 获取推荐商品
    getGoodsList () {
      this.$http.post(this.$api + '/pc/product/queryRecommondProductList', {
        articleId: this.id,
        page: 1,
        pageSize: 4
      }).then(res => {
        if (res.responseCode === '0000') {
          res.data.list.forEach(item => {
            item.k1 = item.product.keywords.split(',')[0]
            item.k2 = item.product.keywords.split(',')[1]
            item.k3 = item.product.keywords.split(',')[2]
          })
          this.goodsList = res.data.list
        } else {
          this.$message.error({
            message: res.responseMsg,
            duration: this.$store.state.duration
          })
        }
      }).catch(err => {
        console.error(err)
      })
    }
  }
}
</script>

<style lang="scss">
.breadcrumb {
  margin: 20px 0;
}
.article {
  margin-bottom: 50px;
  padding: 58px 70px 92px;
  overflow: hidden;
  background: #ffffff;
  .title {
    text-align: center;
    font-size: 24px;
    font-weight: normal;
  }
  .sub {
    margin-top: 40px;
    font-weight: normal;
    font-size: 14px;
    color: #808080;
  }
  .content {
    margin-top: 20px;
    padding-top: 20px;
    font-size: 16px;
    line-height: 1.4;
    color: #333333;
    border-top: solid 1px #eeeeee;
    & > p {
      margin: 20px 0;
      text-indent: 2em!important;
    }
    img {
      display: block;
      margin-bottom: 20px;
      width: 100%;
    }
  }
}
</style>
